<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵图名字</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    span {
      display: inline-block;
      background: url(./images/abcd.jpg) no-repeat;
    }

    .h {
      width: 108px;
      height: 110px;
      background-position: -214px -140px;
    }

    .e {
      width: 102px;
      height: 112px;
      background-position: -480px -6px;
    }

    .i {
      width: 60px;
      height: 108px;
      background-position: -327px -142px;
    }

    .m {
      width: 141px;
      height: 114px;
      background-position: -108px -274px;
    }

    .a {
      width: 109px;
      height: 113px;
      background-position: 0px -8px;
    }
  </style>
</head>

<body>
  <span class="h"></span>
  <span class="e"></span>
  <span class="i"></span>
  <span class="m"></span>
  <span class="a"></span>
</body>

</html>